<template>
  <div id="bacBreakPoint">
    <div class="bodyContent">
      <!-- vxe-toolbar -->
      <Splitpanes class="area">
        <Pane size="60">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input v-model="form.keyvalue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @keydown="keyEnter" @search-click="findList" @clear="findList"></vxe-input>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="findList"></vxe-button>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-add" content="新增" @click="addBacBreakPoint"></vxe-button>
              <vxe-button type="text" class="button-red" icon="vxe-icon-delete" content="删除" @click="deleteBacBreakPoint"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="tableBox">
            <vxe-table ref="tableRef" border="inner" align="left" class="mytable-scrollbar" :loading="showLoading" height="95%" :data="tableData" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, enabled: false }" @cell-click="tableCellClick" show-overflow keep-source>
              <vxe-column type="checkbox" width="26"></vxe-column>
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="guidelines" title="指南名称" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.guidelines" clearable placeholder="指南名称"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="year" title="年份" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.year" clearable placeholder="年份"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="testMethod" title="测试方法" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.testMethod" clearable placeholder="测试方法"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="potency" title="效价" width="90" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.potency" type="text"></vxe-input>
                </template>
              </vxe-column>
              <!-- <vxe-column field="organismCode" title="细菌代码" width="90" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.organismCode" type="text"></vxe-input>
                </template>
              </vxe-column> -->
              <vxe-column field="serovarGroup" title="血清型" width="90" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.serovarGroup" type="text"></vxe-input>
                </template>
              </vxe-column>
              <!-- <vxe-column field="isCommon" title="是否常见" width="80" align="center">
                <template #default="{ row }">
                  <el-tag :type="getIsStaticTagType(row)">
                    {{ getIsStaticStatusDesc(row) }}
                  </el-tag>
                </template>
              </vxe-column> -->

              <vxe-column field="whonetOrgCode" title="细菌代码" width="110" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.whonetOrgCode" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="speciesGroup" title="种" width="70" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.speciesGroup" type="integer"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="genusCode" title="属" width="70" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.genusCode" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="genusGroup" title="属分组" width="70" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.genusGroup" type="text"></vxe-input>
                </template>
              </vxe-column>
              
              <vxe-column field="familyCode" title="科" width="70" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.familyCode" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="anaerobe" title="厌氧类型" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.anaerobe" type="text"></vxe-input>
                </template>
              </vxe-column>

              <vxe-column field="subkingdomCode" title="亚界" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.subkingdomCode" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="breakpointType" title="折点类型" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.breakpointType" type="text"></vxe-input>
                </template>
              </vxe-column>

              <vxe-column field="host" title="宿主" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.host" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="siteOfInfection" title="感染部位" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.siteOfInfection" type="text"></vxe-input>
                </template>
              </vxe-column>

              <vxe-column field="referenceTable" title="参考表" min-width="150">
                <template #edit="{ row }">
                  <vxe-input v-model="row.referenceTable" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="whonetAbxCode" title="WHONET抗生素代码" min-width="150">
                <template #edit="{ row }">
                  <vxe-input v-model="row.whonetAbxCode" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="whonetTest" title="WHONET测试代码" min-width="150">
                <template #edit="{ row }">
                  <vxe-input v-model="row.whonetTest" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="r" title="耐药" min-width="150">
                <template #edit="{ row }">
                  <vxe-input v-model="row.r" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="i" title="中介" min-width="150">
                <template #edit="{ row }">
                  <vxe-input v-model="row.i" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="sdd" title="SDD" min-width="150">
                <template #edit="{ row }">
                  <vxe-input v-model="row.sdd" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="s" title="敏感" min-width="150">
                <template #edit="{ row }">
                  <vxe-input v-model="row.s" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="ecvEcoff" title="流行病学临界值" min-width="150">
                <template #edit="{ row }">
                  <vxe-input v-model="row.ecvEcoff" type="text"></vxe-input>
                </template>
              </vxe-column>

              <!-- <vxe-column field="ecvEcoffTentative" title="ECV_ECOFF是否是暂定 0否 1是" width="80" align="center">
                <template #default="{ row }">
                  <el-tag :type="getIsStaticTagType(row)">
                    {{ getIsStaticStatusDesc(row) }}
                  </el-tag>
                </template>
              </vxe-column> -->

              <vxe-column field="dateEntered" title="折点信息的录入日期" min-width="150">
                <template #edit="{ row }">
                  <vxe-input v-model="row.dateEntered" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="dateModified" title="折点信息的修改日期" min-width="150">
                <template #edit="{ row }">
                  <vxe-input v-model="row.dateModified" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="comments" title="折点注释信息" min-width="150">
                <template #edit="{ row }">
                  <vxe-input v-model="row.comments" type="text"></vxe-input>
                </template>
              </vxe-column>

            </vxe-table>
            <el-pagination :page-sizes="[10, 20, 50, 100]" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="page.totalResult" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </Pane>

        <Pane size="40">
          <el-tabs type="border-card">
            <el-tab-pane label="基本信息">
              <BacBreakPointForm ref="bacBreakPointFormRef" :currentRow="currentRow" @findList="findList" />
            </el-tab-pane>
            <ExtraPropertyPanel :busRow="curSlectRow" />
          </el-tabs>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========src\views\lab_sys\bac_set\BacGermDict.vue
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '../../utils/CommonMessage';
import type { VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import BacBreakPointForm from './StaBreakPointForm.vue'; //基本信息表单组件
import ExtraPropertyPanel from '@/components/ExtraPropertyPanel.vue';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 左侧表格:
let showLoading = ref(false); //刷新+表格加载
const form = reactive({ keyvalue: '' }); //根据关键字查询
const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const tableData = reactive([]); //表格数据
const curSlectRow = ref({});
// 右侧表单:
const bacBreakPointFormRef = ref<InstanceType<typeof bacBreakPointFormRef>>(); //基本信息表单标记ref
let currentRow: any = reactive({ id: '', code: '' }); //基本信息表单当前行数据
const EditExtraPropertiesRef = ref(null); //配置扩展属性弹框ref

// 分页
let page = reactive({
  currentPage: 1,
  pageSize: 10,
  totalResult: 0
});


defineExpose({ initPage });

function initPage() {
  findList();
}

function getIsStaticStatusDesc(row) {
  if (row.isCommon) {
    return '是';
  } else {
    return '否';
  }
}

function getIsStaticTagType(row: any) {
  if (row.isCommon) {
    return 'success';
  } else {
    return 'danger';
  }
}

function getIsStaticStatusDesc1(row) {
  if (row.isAnaerobe) {
    return '是';
  } else {
    return '否';
  }
}
function getIsStaticTagType1(row) {
  if (row.isAnaerobe) {
    return 'success';
  } else {
    return 'danger';
  }
}

function keyEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findList();
  }
}

// 获取折点
const findList = () => {
  showLoading.value = true;
  tableData.length = 0; //放入数据前清空数据
  const url = '/sta/break-point/findBreakPointList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { searchValue: form.keyvalue, pageIndex: page.currentPage, pageSize: page.pageSize } })
    .then(async (res: any) => {
      page.totalResult = res.data.total;
      tableData.push(...res.data.records);
      showLoading.value = false;
      if (res && res.data.records && res.data.records.length > 0) {
        currentRow.id = '';
        tableCellClick({ row: res.data.records[0] });
        const $table = tableRef.value;
        if ($table) {
          await $table.setCurrentRow(res.data.records[0]);
        }
      }
    })
    .catch((err: any) => {
      showLoading.value = false;
      VxeMessage('获取折点数据异常', VxeNotifyType.error);
    });
};

// 新增折点
function addBacBreakPoint() {
  const $formRef = bacBreakPointFormRef.value;
  bacBreakPointFormRef.value.addNew();
}


// 删除折点
function deleteBacBreakPoint() {
  const arr = tableRef.value?.getCheckboxRecords(true);
  // const sltTemplates = (proxy.$refs.templateTableRef as any).getCheckboxRecords();
  if (!(arr && arr.length > 0 && arr[0])) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        const data = { bacBreakPointList: arr };
        const url = '/sta/break-point/batchDeleteBreakPoint';
        proxy.$http
          .post(url, data)
          .then((res: any) => {
            VxeMessage(res.status.msg, VxeNotifyType.success);
            findList();
            bacBreakPointFormRef.value?.clearFormData();
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  }
}

// 表格选中当前行
function tableCellClick({ row }: any) {
  curSlectRow.value = row;
  Object.assign(currentRow, row);
  proxy.$forceUpdate();
}

//更换一页显示数量
function handleSizeChange(val) {
  page.pageSize = val;
  findList();
}

// 点击下一页
function handleCurrentChange(val) {
  page.currentPage = val;
  findList();
}
</script>
<style lang="scss" scoped>
#bacBreakPoint {
  width: 100%;
  height: 100%;

  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);

    .area {
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }

      .tableBox {
        height: calc(100% - 40px);
      }

      .el-tabs--border-card {
        border: none;
        height: 100%;

        :deep(.el-tabs__content) {
          height: calc(100% - 39px - 30px);

          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
